<template>
  <van-datetime-picker
    v-model="currentDate"
    type="date"
    title="选择年月日"
    :min-date="minDate"
    :max-date="maxDate"
    @cancel="onCancel"
    @confirm="onConfirm"
  />
</template>

<script>
import { editUserProfileAPI } from "@/api";
import dayjs from "@/utils/dayjs";
export default {
  // v-model
  // -组件（双向绑定值）
  // -value属性和input事件的语法糖
  //  v-model只能在组件上使用一次
  //   -修改value和input的名字
  //   -修改子组件model:{prop:'属性名'，event：'事件名'}

  // 1.回显数据 2.取消重置 3.更新数据
  name: "updateBirthday",
  model: {
    prop: "birthday",
    event: "update:birthday"
  },
  props: {
    birthday: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(this.birthday)
    };
  },
  methods: {
    onCancel() {
      // 关闭弹层
      this.$emit("close");
      // 通过v-if控制字组件的销毁
    },
    async onConfirm() {
      this.$toast.loading({
        message: "修改生日中...",
        forbidClick: true
      });
      try {
        // 1.更换currentDate的格式
        const birthday = dayjs(this.currentDate).format("YYYY - MM - DD");

        // 2.发请求
        await editUserProfileAPI({
          birthday
        });

        // 3.更新视图
        this.$emit("update:birthday", birthday);

        // 4.关闭弹层
        this.$emit("close");

        // 5.轻提示
        this.$toast.success("修改生日成功");
      } catch (error) {
        this.$toast.fail("修改生日失败");
      }
    }
  }
};
</script>

<style></style>
